<template>
    <div class="movie">
        <!-- 头部搜索框 -->
        <div class="header">
            <input type="text" @click="goSearch" placeholder="釜山行、夏有乔木仰望天堂">
            <img src="../../assets/images/icon/search.png" alt="">
        </div>

        <!-- 电影列表 -->
        <MovieList :movies="hotMovies">
            <span slot="title">正在热映</span>
            <span class="more" slot="more" @click="goHot">更多></span>
        </MovieList>

        <MovieList :movies="soonMovies">
            <span slot="title">即将上映</span>
            <span class="more" slot="more" @click="goSoon">更多></span>
        </MovieList>

        <MovieList :movies="top250">
            <span slot="title">top250</span>
            <span class="more" slot="more" @click="goTop250">更多></span>
        </MovieList>
    </div>
</template>

<script>
import MovieList from "../../components/MovieList.vue"
export default {
    data() {
        return {
            hotMovies:[],
            soonMovies:[],
            top250:[],
        }
    },
    components:{
        MovieList
    },
    mounted() {
        this.$http(`http://122.112.161.135:4000/api/movie/inTheaters`).then(res=>{
            this.hotMovies = res.data.res.slice(0,3).map(item=>{
                item.rating = item.raiting;
                return item
            })
        });
        this.$http(`http://122.112.161.135:4000/api/movie/comingSoon`).then(res=>{
            this.soonMovies = res.data.res.slice(0,3)
        });
        this.$http(`http://122.112.161.135:4000/api/movie/top250`).then(res=>{
            this.top250 = res.data.res.slice(0,3)
        });

    },
    methods: {
        goHot(){
            this.$router.push("/movie/hotmovie")
        },
        goSoon(){
            this.$router.push("/movie/soonmovie")
        },
        goTop250(){
            this.$router.push("/movie/top250")
        },
        goSearch(){
            this.$router.push("/movie/search")
        }
    },
}
</script>

<style scoped>
.header{
    height: 1rem;
    position: relative;
}
.header input{
    width: 100%;
    height: 100%;
    background-color: #f2f2f2;
    outline: none;
    border: none;
    padding-left: 1.5rem;
    box-sizing: border-box;
}
.header img{
    width: 0.5rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0.3rem;
}
.more{
    color: #1f4ba5;
}
</style>